<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权限控制</title>
    <link rel="stylesheet" href="Layuimini/lib/layui-v2.6.3/css/layui.css"
          th:href="@{Layuimini/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" href="Layuimini/lib/font-awesome-4.7.0/css/font-awesome.min.css"
          th:href="@{Layuimini/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <link rel="stylesheet" href="Layuimini/css/public.css" th:href="@{Layuimini/css/public.css}" media="all">
</head>

<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-row">
            <div class="layui-col-md6">
                <fieldset class="layui-elem-field layui-field-title" align="center">
                    <legend>权限控制</legend>
                </fieldset>

                <div id="test1" class="demo-transfer"></div>

            </div>
            <div class="layui-col-md6">
                <fieldset class="layui-elem-field layui-field-title" align="center">
                    <legend>系统设置</legend>
                </fieldset>
                <div>
                    <button type="button" class="layui-btn layui-btn-fluid" onclick="clearMenu()">
                        <i class="fa fa-refresh"></i>
                        清除菜单缓存
                    </button>
                    <br><br>
                    <button type="button" class="layui-btn layui-btn-fluid" onclick="clearWeb()">
                        <i class="fa fa-spinner"></i>
                        清除项目缓存
                    </button>
                    <br><br>

                    <button type="button" class="layui-btn layui-btn-fluid" onclick="initMusic()">
                        <i class="fa fa-music"></i>
                        初始化音乐列表
                    </button>
                    <br><br>
                    <button type="button" name="music" class="layui-btn layui-btn-fluid" id="uploadMusicBtn">
                        <i class="fa fa-headphones"></i>
                        上传背景音乐
                    </button>
                    <br><br>
                    <!-- 删除音乐from表单-->

                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <label class="layui-form-label">删除音乐</label>
                            <div class="layui-input-block">
                                <input type="text" id="keyId" name="key" placeholder="例:music/a.mp3" value=""
                                       class="layui-input">
                            </div>
                        </div>
                        <!--<button  class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger" id="delBtn">删除</button>
                        <button  class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm"   id="resetBtn">重置</button>-->
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" title="删除音乐文件"
                                id="delBtn">
                            <i class="layui-icon">&#xe640;</i>
                        </button>
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" title="重置" id="resetBtn">
                            <i class="layui-icon">&#xe9aa;</i>
                        </button>
                    </div>


                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <label class="layui-form-label">生成印章</label>
                            <div class="layui-input-block">
                                <input type="text" id="sealId" name="name" placeholder="例:刘德华印" lay-verify="required"
                                       lay-reqtext="名称不能为空" value=""
                                       class="layui-input">
                            </div>
                        </div>
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" title="下载印章图片"
                                id="downSealId">
                            <!--  <i class="fa fa-download"></i>-->
                            <i class="layui-icon">&#xe683;</i>

                        </button>
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" title="重置"
                                id="resetSealBtn">
                            <i class="layui-icon">&#xe9aa;</i>
                        </button>
                    </div>


                </div>

            </div>

        </div>
    </div>
</div>
<script src="jQuery/jquery-2.1.1.min.js" th:src="@{LightYear/js/jquery.min.js}" charset="utf-8"></script>
<script src="Layuimini/lib/layui-v2.6.3/layui.js" th:src="@{Layuimini/lib/layui-v2.6.3/layui.js}"
        charset="utf-8"></script>
<script>

    layui.use(['transfer', 'layer', 'util', 'upload'], function () {
        var $ = layui.$
            , transfer = layui.transfer
            , layer = layui.layer
            , upload = layui.upload
            , util = layui.util
        $ = layui.$;


        var uploadInst = upload.render({
            elem: '#uploadMusicBtn' //绑定元素
            , url: 'tx/music/upload' //上传接口
            , accept: 'file'
            , field: 'music'
            , exts: 'mp3'
            , done: function (res) {
                //上传完毕回调
                layer.alert("音乐文件上传成功!请初始化音乐列表后访问该音乐!")
            }
            , error: function () {
                //请求异常回调
            }
        });

        //模拟数据
        /*  var data1 = [
              {"value": "1", "title": "李白"}
              ,{"value": "2", "title": "杜甫"}
              ,{"value": "3", "title": "苏轼"}
              ,{"value": "4", "title": "李清照"}
              ,{"value": "5", "title": "admin", "disabled": true}
              ,{"value": "6", "title": "巴金"}
              ,{"value": "7", "title": "冰心"}
              ,{"value": "8", "title": "矛盾"}
              ,{"value": "9", "title": "贤心"}
          ]*/
        var data1 = new Array();
        $.ajax({
            url: "superLoginUser/getUserName",
            type: "POST",
            async: false, //指定为同步请求，才能给下面data1赋值
            success: function (result) {
                data1 = result;
            }
        });


        //前端处理的 admin用户不能被修改  多给了属性disabled=true
        data1[0].disabled = true;
        //  data1[1].disabled=true;
        //   console.log(data1[0])
        //   console.log(data1)


        var value1 = new Array();
        $.ajax({
            url: "superLoginUser/getRoleUserId",
            type: "POST",
            async: false, //指定为同步请求，才能给下面data1赋值
            success: function (result) {
                value1 = result;
            }
        });


        var uids = new Array();
        var names = new Array();
        //基础效果
        transfer.render({
            elem: '#test1'
            , data: data1
            , title: ['普通用户', '管理员']
            , value: value1   //初始化右侧数据
            , showSearch: true    //显示搜索框
            //,id: '1' //定义唯一索引
            , parseData: function (res) {//数据参数来源data转换处理
                return {
                    "value": res.id //data属性
                    , "title": res.username//data属性
                    , "disabled": res.disabled
                }
            }
            , onchange: function (obj, index) {
                console.log(obj);
                //var arr = ['普通用户', '管理员'];
                // layer.alert('来自 <strong>'+ arr[index] + '</strong> 的数据：'+ JSON.stringify(obj)); //获得被穿梭时的数据
                //这里进行后台修改权限操作
                for (var i = 0; i < obj.length; i++) {
                    uids.push(obj[i].value);
                    names.push(obj[i].title);
                }

                // console.log(uids);

                $.ajax({
                    url: "superLoginRoleUser/getRoleUserById?uids=" + uids,
                    type: "GET",
                    //   data:{"uids":uids},
                    //   async: false, //指定为同步请求，才能给下面data1赋值
                    success: function (result) {
                        //  console.log(JSON.stringify(result));
                        layer.msg(names + "权限修改成功！")
                        uids = [];
                        names = [];
                    }
                });

            }


        })
    });

    function clearMenu() {
        layer.confirm('您确定清理菜单缓存吗?', {btn: ['确定', '取消'], title: "提示"}, function (index) {
            $.ajax({
                url: "clearMenu",    //clearWeb   这个是清理所有缓存
                type: "GET",
                success: function () {
                    // window.location.reload();
                    layer.msg("菜单缓存清理完成!")
                }
            });
            layer.close(index);

        });
    }


    function clearWeb() {
        layer.confirm('你确定要清除系统缓存吗？', {btn: ['确定', '取消'], title: "提示"}, function (index) {
            layer.msg('系统缓存清理中...', {icon: 16, shade: 0.3, time: 2800}, function () {
                $.ajax({
                    url: "clearWeb",    //clearWeb   这个是清理所有缓存
                    type: "GET",
                    success: function () {
                        layer.msg("redis缓存清理完成!")
                    }
                });
            });
            layer.close(index);
        });
    }


    function initMusic() {
        layer.confirm('您确定初始化音乐列表吗?', {btn: ['确定', '取消'], title: "提示"}, function (index) {

            layer.msg('音乐列表初始化中...', {icon: 16, shade: 0.3, time: 2800}, function () {
                $.ajax({
                    url: "initMusic",    //clearWeb   这个是清理所有缓存
                    type: "GET",
                    success: function () {
                        layer.msg("音乐列表初始化完成!")
                    }
                });
            });
            layer.close(index);
        });
    }

    $("#resetBtn").click(function () {
        $("#keyId").val("");
        //window.location.reload();
    })


    $("#resetSealBtn").click(function () {
        $("#sealId").val("");
        //window.location.reload();
    })

    $("#delBtn").click(function () {
        var key = $("#keyId").val();
        if (key == "") {
            layer.tips("内容不能为空!", "#keyId", {tips: 1});
            return false;
        }
        if (key.indexOf("mp3") == -1 && key.indexOf("MP3") == -1 || key.indexOf("/") == -1) {
            layer.tips("文件内容有误!", "#keyId", {tips: 1});
            return false;
        }


        layer.confirm('你确定要删除音乐文件吗？', {btn: ['确定', '取消'], title: "提示"}, function (index) {
            layer.msg('删除中...', {icon: 16, shade: 0.3, time: 2800}, function () {
                $.ajax({
                    url: "tx/delete/file",    //clearWeb   这个是清理所有缓存
                    data: {"key": key},
                    type: "GET",
                    success: function () {
                        layer.msg("音乐文件不存在默认删除成功!")
                        // layer.msg('音乐文件删除成功!');
                    }
                });
            });
            layer.close(index);
        });
    })


    /*    $("#sealId").on({
            mouseenter: function () {
                var that = this;
                tips = layer.tips("<span style='color: #000;'>请输入2-4个中文!</span>",
                    that, {tips: [3, '#fff'], time: 0, area: 'auto', maxWidth: 500});
            },
            mouseleave: function () {
                layer.close(tips);
            }
        });*/


    $("#downSealId").click(function () {
        var name = $("#sealId").val();
        if (name == "") {
            layer.tips("内容不能为空!", "#sealId", {tips: 1});
            return false;
        }
        var regu = /^[\u4e00-\u9fa5]{2,4}$/;    //js正则验证
        var reg = new RegExp(regu);
        if (!reg.test(name)) {
            layer.tips("内容必须为2~4个中文字符!", "#sealId", {tips: 1});
            return false;
        }
        layer.confirm('你确定要生成并下载[ ' + name + ' ]印章图片吗？', {btn: ['确定', '取消'], title: "提示"}, function (index) {
            layer.msg('生成中...', {icon: 16, shade: 0.3, time: 800}, function () {
                window.location.href = "downSealFile?name=" + name;
            });
            layer.close(index);
        });


    })


</script>

</body>
</html>